/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */
/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */
import React, { useEffect } from "react";
import { Button, Col, Row } from "antd";
import Ball from "./ball";
import Ball2 from "./ball2";
import Sphere from "./ball3";
import ballBg from "@/assets/ball_bg.png";
import styled from "styled-components";
import box1 from "@/assets/box1.png";
import box2 from "@/assets/box2.png";
import { Canvas, Chart, Axis, Tooltip, Interval } from "@antv/f2";
type Props = {};

export default function DashBoard({}: Props) {
  useEffect(() => {
    // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
    const data = [
      {
        name: "London",
        月份: "Jan.",
        月均降雨量: 18.9,
      },
      {
        name: "London",
        月份: "Feb.",
        月均降雨量: 28.8,
      },
      {
        name: "London",
        月份: "Mar.",
        月均降雨量: 39.3,
      },
      {
        name: "London",
        月份: "Apr.",
        月均降雨量: 81.4,
      },
      {
        name: "London",
        月份: "May.",
        月均降雨量: 47,
      },
      {
        name: "London",
        月份: "Jun.",
        月均降雨量: 20.3,
      },
      {
        name: "London",
        月份: "Jul.",
        月均降雨量: 24,
      },
      {
        name: "London",
        月份: "Aug.",
        月均降雨量: 35.6,
      },
      {
        name: "Berlin",
        月份: "Jan.",
        月均降雨量: 12.4,
      },
      {
        name: "Berlin",
        月份: "Feb.",
        月均降雨量: 23.2,
      },
      {
        name: "Berlin",
        月份: "Mar.",
        月均降雨量: 34.5,
      },
      {
        name: "Berlin",
        月份: "Apr.",
        月均降雨量: 99.7,
      },
      {
        name: "Berlin",
        月份: "May.",
        月均降雨量: 52.6,
      },
      {
        name: "Berlin",
        月份: "Jun.",
        月均降雨量: 35.5,
      },
      {
        name: "Berlin",
        月份: "Jul.",
        月均降雨量: 37.4,
      },
      {
        name: "Berlin",
        月份: "Aug.",
        月均降雨量: 42.4,
      },
    ];

    // 获取 canvas context
    const context = (
      document.getElementById("myChart")! as HTMLCanvasElement
    ).getContext("2d");
    const { props } = (
      <Canvas
        context={context as CanvasRenderingContext2D}
        pixelRatio={window.devicePixelRatio}
      >
        <Chart
          data={data}
          coord={{
            transposed: true,
          }}
          scale={{
            月均降雨量: {
              tickCount: 5,
            },
          }}
        >
          <Axis field="月份" />
          <Axis field="月均降雨量" />
          <Interval x="月份" y="月均降雨量" color="name" adjust="stack" />
        </Chart>
      </Canvas>
    );

    const canvas = new Canvas(props);
    canvas.render();
  }, []);
  return (
    <Cont>
      {/* <Ball /> */}
      {/* <Ball2 /> */}
      <Row>
        <Col span={6}>
          <Box1>
            <canvas id="myChart" width="400" height="260"></canvas>
          </Box1>
          <Box2></Box2>
        </Col>
        <Col span={12}>
          <Sphere imageUrl={ballBg} />
        </Col>
        <Col span={6}>
          <Box1></Box1>
          <Box2></Box2>
        </Col>
      </Row>
    </Cont>
  );
}

const Cont = styled.div`
  background-color: #02004d;
`;
const Box1 = styled.div`
  height: 270px;
  background-image: url(${box1});
  background-size: 100% 100%;
  padding-top: 30px;
`;

const Box2 = styled.div`
  height: 200px;
  background-image: url(${box2});
  background-size: 100% 100%;
`;
